<template>
    <div>
        <setHeader :title="headTitle" settext="提交" @done="gotobtn()"></setHeader>
        <div class="content" style="background-color: #f5f5f5;">
            <camera headerimg="企业头像：" :headerimgs="companyinfo.log_img" v-on:spot="spot" v-if="companyinfo.log_img"> </camera>
            <camera headerimg="企业头像：" :headerimgs="require('../common/images/youquan.png')" v-on:spot="spot" v-else> </camera>
            <div class="main-navigater main-nav-menu" style="margin-top: 0; border-top: 1px solid #d8d8d8;">
                <a href="javascript:void(0)" class="main_menu" style="width: 100%;display: flow-root;">
                    <label for="">企业名称： <span style="font-size: 0.26rem; color: #666;text-align: left;line-height: 1rem; width: 78%;display: inline-block;">{{companyinfo.name}}</span></label>
                </a>
                <a href="javascript:void(0)" class="main_menu" style="width: 100%;height: auto;padding: 0.12rem 0.2rem;" @click="openProfile">
                    <label for="" style="width:100% !important;">企业简介： <span style="font-size: 0.26rem; color: #666;text-align: left;line-height: 0.36rem; width: 74%;display: inline-block;height: auto;word-break: break-all;word-spacing: 1px;vertical-align: middle;">{{description}}</span><i class="iconfont icon-xiangyou"></i></label>
                </a>
                <a href="javascript:void(0)" class="main_menu" style="width: 100%;display: flow-root;postion:relative;" @click="selectAddress">
                    <label for="" style="height: 1rem;line-height: 1rem;display: block;">企业地区：
                        <span v-if="ad_name" style="font-size: 0.26rem; color: #666;text-align: left;line-height: 1rem; display: inline-flex;width: 72%; white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden;">
                            {{ad_name}}
                        </span>
                        <span v-else style="font-size: 0.26rem; color: #ededed;text-align: left;line-height: 1rem; display: inline-flex;width: 72%;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden;">
                            请选择地区
                        </span>
                        <i class="iconfont icon-shixinxiajiantou" style="font-size: 0.26rem;color: #999;"></i>
                        <!-- <input type="text" placeholder="请选择地区" v-model="ad_name" @mousedown="showPicker" @click="selectAddress" style="font-size: 0.26rem; color: #666;text-align: left;line-height: 1rem; display: inline-block;width: 74%;"> -->
                    </label>
                    
                </a>
                <a href="javascript:void(0)" class="main_menu" style="width: 100%;display: flow-root;margin-bottom: 0.2rem;">
                    <label for="">详情地址：<input type="text" placeholder="请填写详细地址" style="font-size: 0.26rem; color: #666;text-align: left;line-height: 1rem; width: 78%;display: inline-block;" v-model="address"></label>
                    
                </a>
                <a href="javascript:void(0)" class="main_menu" style="width: 100%;display: flow-root;">
                    <label for="">真实姓名： <span style="font-size: 0.26rem; color: #666;text-align: left;line-height: 1rem; width: 78%;display: inline-block;" contenteditable="true" ref="mybox" >{{companyinfo.admin_name}}</span></label>
                </a>
                <!-- <a href="javascript:void(0)" class="main_menu">
                    <label for="">真实姓名： <span style="font-size: 0.26rem; color: #666;">{{companyinfo.admin_name}}</span></label>
                    <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a> 
                </a> -->
                <a href="javascript:void(0)" class="main_menu" style="width: 100%;display: flow-root;">
                    <label for="">您的职位： <span style="font-size: 0.26rem; color: #666;text-align: left;line-height: 1rem; width: 78%;display: inline-block;" @click.capture="showCompanyList">{{architeName}}</span></label>
                    <!-- <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a> -->
                </a>
              <!-- <div style="background-color: #fff; padding: 0 0.2rem;">
                  <p class="compandy-notice">营业执照：</p>
                   <div  class="y-prompt"><span>仅支持JPG,JPEG和PNG格式，大小不超过5兆.文字应清晰可辨。企业名称必须与您填写的一致。</span></div> 

                <img :src="companyinfo.license_img" alt="">
                   <el-upload
                    class="avatar-uploaderer"
                    :action="importFileUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <div class="plusBGI"><img src="../common/images/addphoto.jpg" alt=""></div>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i> 
                  </el-upload> 
              </div> -->
            </div>
        </div>
        <!-- 地区 -->
        <AreaLinkage v-show="linkShow" @textname="showLinkage"  @textnameId="showLinkageId" @done="closeAdd"></AreaLinkage>
         <!-- 企业简介 -->
        <ViewModal :modalState.sync="viewState">
            <enterProfile @closedone="closePageModal" @done="carryout" v-on:contentSpot="contentSpot"></enterProfile>
        </ViewModal>
        <!--组织架构-->
        <mt-popup
            v-model="popupVisible"
            position="bottom">
        <ul> 
            <li style="text-align: left;" :style="list.style" v-for="list in UcompanyList" @click="JoinCompany(list.name,list.id)" :key="list.id">{{list.name}}</li>
        </ul>
        </mt-popup>
        <so-footer></so-footer>
    </div>
</template>

<script>
import setHeader from '../public/setHeader';
import camera from '../public/compnay_bar';
import enterProfile from '../public/enter_profile';
import ViewModal from "@/components/View";
import AreaLinkage from '@/components/area_linkage';
import soFooter from '../components/footer-bar';
    export default {
        data() {
            return {
                headTitle: '企业编辑',
                importFileUrl:this.$path+'/api.php/upload/upimage',
                imageUrl:'',
                licenseImgPath: '',
                UcompanyList:[],
                popupVisible:false,
                cpId: '',
                userInfo:'',
                companyinfo:'',
                proData:'',
                companyinfos:{},
                viewState: false,
                desc:'',
                linkShow: false,   //企业地区
                ad_name:'',        //企业绑定
                address_id: '',
                address: '',
                architeId:'',
                architeName:'',
                description:'',
                address:'',
            }
        },
        components: {
            setHeader,
            camera,
            enterProfile,
            ViewModal,
            AreaLinkage,
            soFooter
        },
        mounted() {
            this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
            this.access_token = window.localStorage.getItem('access_token');
            this.cpId = this.$route.query.cp_id;
            //获取企业信息
            this.getCompanyInfo();
            //获取企业组织架构
            this.getAuthriList();
        },
        methods: {
            //点击选择职业
            showCompanyList:function(){
                this.popupVisible = true;
            },
            JoinCompany:function(name,id){
                this.architeName = name;
                this.architeId = id;
                // this.architeNamea = name;
                // this.userInfo.company_id = id;
                //  console.log('company_id', this.userInfo.company_id);
                this.popupVisible = false;
            },
            //获取当前企业的所有职位信息
            getAuthriList:function(){
                let that = this;
                // let company_id = that.userInfo.company_id;
                // console.log('company_id', company_id);
                this.$post(
                    that.$path+'/api.php/company/getCompanyAuthi',{cp_id:that.cpId,access_token:that.access_token})
                    .then((res) => {
                        console.log('企业职位', res);
                         if(res.code == 200) {
                            that.architeNames= '请点击选择职位';
                            that.UcompanyList = res.data;     
                            that.UcompanyList.forEach((element,index) => {
                                if(element.level == 1) {
                                    that.UcompanyList[index].style = 'padding-left: 0.2rem';
                                }else if(element.level == 2){
                                    that.UcompanyList[index].style = 'padding-left: 0.6rem';
                                }else if(element.level == 3){
                                    that.UcompanyList[index].style = 'padding-left: 1rem';
                                }
                            });           
                         }
                })
            },
            // 头像
            spot:function(data){
                this.proData = data;
                console.log('1221',data)
            },
            //获取企业信息
            getCompanyInfo(){
                let cp_id = this.cpId;
                let userId = this.userInfo.uid;
                    this.$fetch(this.$path + '/api.php/company/getCompanyBaseInfo',{cp_id,userId}).then((response) => {
                            console.log('企业基本信息',response);
                            this.companyinfo = response.data;
                            this.description = response.data.description;
                            this.architeId = response.data.architeId;
                            this.architeName = response.data.architeName;
                            console.log('001',this.architeId);
                    })
            },
            gotobtn() {
                let that= this;
                let admin_name = this.$refs.mybox.innerHTML; 
                this.companyinfos.pro = this.proData;
                this.companyinfos.admin_name = admin_name;
                if(this.description == null){
                    this.description = '';
                }
                this.companyinfos.description = this.description;
                this.companyinfos.cpId  = this.cpId;
                this.companyinfos.userId  = this.userInfo.uid;
                this.companyinfos.address_id = this.address_id;
                this.companyinfos.architeId = this.architeId;
                this.companyinfos.architeName = this.architeName;
                this.companyinfos.address = this.address;
                // console.log(this.companyinfos);return false;
                this.$fetch(this.$path + '/api.php/company/editorCompanyBase',this.companyinfos).then((response) => {
                       if(response.code == 200){
                            that.$openDialog({
                                src: require('../common/images/UI-11.png'),
                                title: '提交完成',
                                message: '编辑成功',
                                okText: '完成',
                                callback (flag) {
                                    if(flag) {
                                        that.$router.replace({ path: '/userCenter/companyData', query: {cpId:that.cpId,u_type:1}})
                                    }     
                                }
                            }); 
                       }else {
                            that.$openDialog({
                                src: require('../common/images/UI-08.png'),
                                title: '提交失败',
                                message: response.msg,
                                okText: '确定'
                            });
                       }
                })
                  
            },
            handleAvatarSuccess(res, file) {
                this.licenseImgPath = res.headpath;
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isPNG) {
                this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
                return false;
                }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                return false;
                }
            },
            // 打开企业简介
            openProfile() {
                this.viewState = true;
            },
            // 简介
            contentSpot(data) {
                this.description = data;
                console.log('data',data);
            },
            // 保存
            carryout(data) {
                this.desc = data;
                this.companyinfo.description = data;
                this.viewState = false;
            },
            // 关闭
            closePageModal() {
                this.viewState = false;
            },
			//点击选择地区
            selectAddress:function(){
                this.linkShow = !this.linkShow;
            },
            // 关闭选择地区
            closeAdd() {
                this.linkShow = false;
            },
            // 选择好地区后绑定值在input框
            showLinkage(data) {
                this.ad_name = data;
                this.linkShow = false;
            },
            showLinkageId(data) {
                this.address_id = data;
                this.linkShow = false;
                console.log(data);
            },
            showPicker(e){
                e.preventDefault(); //阻止输入法的唤醒
			},
        }
    }
</script>

<style>
/* 营业执照 */
.compandy-notice{
   color: #333333 ;
   font-size: 0.28rem ;
   display: block;
   padding: 0.4rem 0;
   text-align: left ; 
   font-weight: 400 ;
}
 .y-prompt{
   font-size: 0.22rem ;
   color: #999999 ;
   padding: 0 0.2rem ;
   text-align: left ;
 }
 .y-prompt span{
   text-align: left ;
 }
.avatar-uploaderer{
   margin-top: 0.4rem;
   padding-bottom: 0.28rem;
 }
.avatar-uploaderer .el-upload {
    border: 0.01rem  dashed rgba(153,153,153,1);
    border-radius: 2px ;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 3.8rem;
    height: 2.8rem;
}
.avatar-uploaderer img {
    width: 3.8rem;
    height: 2.8rem;
    border-radius: 2px;
}
.plusBGI{
  /* background: url('../common/images/addphoto.jpg') no-repeat; */
  /* background-size: 100% 100%;  */
  padding: 0.25rem 0.44rem ;
}
.plusBGI img{
  width: 100%;
  height: 100% ;
}


</style>